import { parseHTML } from "./parser-html.js";
import { generate } from "./generate.js"

export function compileToFunction(template) {
  // 1. 解析html字符串， 将html字符串转为ast语法树
  let root = parseHTML(template);
  // 2. 需要将ast语法树生成最终的render函数，  就是字符串拼接（模板引擎）

  // <div id="app"><p>hello {{name}}</p>hello</div>
  // _c("div", {id: "app"}, _c("p", undefined, _v("hello" + _s(name)), _v("hello")))
  // 核心思路就是将模板转化为上面的字符串
  // 将ast树 再次转化为js的语法

  let code = generate(root);
  // console.log(code);
  let renderFn = new Function(`with(this){ return ${code}}`);
  // console.log(renderFn);
  // 所有的模板引擎的实现： 都需要new Function + with  ==> 1. 字符串拼接；2. 添加with；3. new Function
  // vue的render 返回的都是虚拟dom
  return renderFn;
}

// ast语法树是用对象来描述原生语法的
// 虚拟dom是用对象来描述dom节点的

// 解析html
// start: div attrs: [{ name: "id", value: "app" }]
// start: p
// start: text  hello
// end: p
// end div

// <div id="app">
//    <p>hello</p>
// </div>

// ast语法树
// let root = {
//   tag: "div",
//   props: [
//     {
//       name: "id",
//       value: "app"
//     }
//   ],
//   parent: null,
//   type: 1,
//   children: [
//     {
//       tag: "p",
//       props: [],
//       parent: root,
//       type: 1,
//       children: [
//         {
//           text: "hello",
//           type: 3
//         }
//       ]
//     }
//   ]
// }